@extends('layouts.wechat.application')
@section('content')
    <div id="wrapper">
        <div class="page-index" id="home" data-log="首页">
            <div class="index-header">
                <div class="search_bar">
                    <a href="/product/search">
                        <span class="icon icon-search"></span>
                        <span class="text">搜索商品名称</span>
                    </a>
                </div>
                <div class="search_bottom"></div>
            </div>

            <!--焦点图-->
            <section class="slider">
                <div class="flexslider">
                    <ul class="slides">
                        @foreach($slides as $slide)
                            <li>
                                <a href="{{$slide->url}}"><img src="{{$slide->thumb}}"/></a>
                            </li>
                        @endforeach

                    </ul>
                </div>
            </section>

            <!--推荐商品-->
            <div class="list">
                <div class="section">
                    <div class="mcells_auto_fill">
                        <div class="body">
                            @foreach($banners as $banner)
                                <div>
                                    <div class="items">
                                        <a href="{{$banner->url}}">
                                            <img src="{{$banner->thumb}}">
                                        </a>
                                    </div>
                                </div>
                            @endforeach

                        </div>
                    </div>
                </div>
                @foreach($products as $product)
                    <div class="section">
                        <div class="item">
                            <div class="img" onclick="location.href='/product/show?id={{$product->id}}'">
                                <img class="ico" src="{{$product->thumb}}">
                                @if($product->is_new == 1)
                                    <img class="tag " src="/wechat/assets/images/new.png">
                                @elseif($product->is_hot == 1)
                                    <img class="tag " src="/wechat/assets/images/hot.png">
                                @endif

                            </div>
                            <div class="info">
                                <div class="name"><p>{{$product->name}}</p></div>
                                <div class="brief"><p>{{$product->description}}</p></div>
                                <div class="price"><p>{{$product->price}}元 起</p></div>
                            </div>
                        </div>
                    </div>
                @endforeach
                <div class="perspective" id="loadmore" style="display: none">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        </div>
    </div>
    @include('layouts.wechat._footer')

@endsection
@section('js')
    <script>
        $(function () {
            var nStart = 4;
            $(window).scroll(function () {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(this).height();

                if (scrollTop + windowHeight == scrollHeight) {

                    //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
                    if (nStart >= "{{$total}}") {
                        //alert('后面没有数据了！');
                        $("#loadmore").text('没有数据了亲...');
                        return false;
                        }
                        else{
                        $('#loadmore').show();
                        $.ajax({
                            type: 'POST',
                            url: '/home/more',
                            data: {start: nStart},
                            success: function (res) {
                                $.each(res['result'], function (i, item) {
                                    var img = "";
                                    if (item.is_hot == 1) {
                                        img = '<img class="tag" src="/wechat/assets/images/hot.png">';
                                    }
                                    if (item.is_new == 1) {
                                        img = '<img class="tag" src="/wechat/assets/images/new.png">';
                                    }
                                    $('#loadmore').before(
                                        '<div class="section" id="redgiftNextPage">' +
                                        '<div class="item">' +
                                        '<div class="img"><a href="/product/show/?id=' + item.id + '">' +
                                        '<img class="ico" src="' + item.thumb + '">' + img +
                                        '</a></div>' +
                                        '<div class="info">' +
                                        '<div class="name"><p>' + item.name + '</p></div>' +
                                        '<div class="brief"><p>' + item.description + '</p></div>' +
                                        '<div class="price"><p>' + item.price + '元 起</p></div>' +
                                        '</div>' +
                                        '</div>' +
                                        '</div>')
                                });
                                nStart ++;
                            }
                        });
                    }
                }
                return false;
            });
        })
    </script>
@endsection


